<template>
  <div class="right-submit-area">
    <el-tree
      ref="tree"
      :data="treeData"
      :props="defaultProps"
      :highlight-current="!canSet"
      :show-checkbox="canSet"
      node-key="treeKey"
      class="scroll-area"
      :default-expanded-keys="expandedKeys"
      @node-click="handleNodeClick"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <i class="el-icon-s-custom" v-if="data.type === 'user'"></i>
        <span> {{ node.label }}</span>
      </span>
    </el-tree>
    <div class="btn" v-if="canSet">
      <el-button style="width: 140px" type="primary" @click="submitUser"
        >保存</el-button
      >
      <el-button style="width: 140px" @click="reset">重置</el-button>
    </div>
  </div>
</template>

<script>
import { list as userList } from '@/api/system/user';
import { list as organList } from '@/api/system/organ';

let ajaxStatus = '';

export default {
  name: 'AuthTree',
  props: {
    canSet: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      expandedKeys: [],
      treeData: [],
      userData: [],
      organData: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    };
  },
  created() {
    this.getUserList();
    this.getOrganList();
  },
  computed: {},
  watch: {},
  methods: {
    setSelect(arr) {
      this.$refs.tree.setCheckedKeys(arr);
      this.expandedKeys = arr;
      //this.setExpand()
    },
    setExpand() {
      let treeNodes = this.$refs.tree.store._getAllNodes();
      for (let i = 0; i < treeNodes.length; i++) {
        treeNodes[i].expanded = treeNodes[i].checked;
      }
    },
    submitUser() {
      let arr = this.$refs.tree
        .getCheckedNodes()
        .filter((item) => item.type === 'user')
        .map((item) => item.userId);
      this.$emit('user-submit', arr);
    },
    reset() {
      this.$emit('user-reset');
    },
    handleNodeClick(data, node) {
      if (data.type === 'user') {
        this.$emit('user-select', data);
      }
    },
    getUserList() {
      userList().then((res) => {
        ajaxStatus += 'user';
        this.userData = res.rows;
        this.createTree();
      });
    },
    getOrganList() {
      organList().then((res) => {
        ajaxStatus += 'organ';
        this.organData = res.rows;
        this.createTree();
      });
    },
    createTree() {
      if (ajaxStatus.indexOf('user') > -1 && ajaxStatus.indexOf('organ') > -1) {
        let indexObj = {};
        let arr = this.organData;
        let idKey = 'organId',
          parentKey = 'preorganid';
        arr.forEach((item) => {
          item.children = [];
          item.type = 'organ';
          item.label = item.organName;
          item.treeKey = item.organId;
          item.disabled = true;
          indexObj[item.organId] = item;
        });
        this.userData.forEach((item) => {
          item.type = 'user';
          item.label = item.userName;
          item.treeKey = item.userId;
          if (indexObj.hasOwnProperty(item.organid)) {
            indexObj[item.organid].disabled = false;
            indexObj[item.organid].children.push(item);
          }
        });
        let tree = [];
        for (let i = arr.length - 1; i >= 0; i--) {
          let item = arr[i];
          if (indexObj.hasOwnProperty(item[parentKey])) {
            indexObj[item[parentKey]].children.unshift(item);
          } else {
            tree.unshift(indexObj[item[idKey]]);
          }
        }
        this.treeData = tree;
      }
    },
  },
};
</script>

<style scoped lang="scss">
@import '~@/styles/mixin.scss';
.right-submit-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  .scroll-area {
    flex: 1;
    @include noScrollBar();
  }
  .btn {
    margin-top: 10px;
    text-align: right;
  }
}
</style>
